<script>
export default {
	name: 'Source'
}
</script>
<script setup>

import { ref, onActivated, onDeactivated } from 'vue';
import { getSourceListFn } from '@/api/find';
import sourceCom from '@/components/sourceCom.vue';
import router from '@/router';


const sourceList = ref([])
const sourceList1 = ref([])

getSourceListFn().then(res => {
	sourceList.value = res.data
	sourceList1.value = res.data
})

function select(fieldValue1, fieldValue2, sourceList) {
	if (fieldValue1 == '出发地') {
		if (fieldValue2 == '目的地') {
			return sourceList
		}
		return sourceList.filter(item => item.to == fieldValue2)
	} else {
		if (fieldValue2 == '目的地') {
			return sourceList.filter(item => item.from == fieldValue1)
		}
		return sourceList.filter(item => item.from == fieldValue1 && item.to == fieldValue2)
	}
}


const showPicker1 = ref(false);
const columns1 = [
	{
		text: '全部', value: 'all', children: [
			{ text: '出发地', value: 'all' },
		]
	},
	{
		text: '浙江省', value: 'zhejiang', children: [
			{ text: '杭州', value: 'Hangzhou' },
			{ text: '宁波', value: 'Ningbo' },
			{ text: '温州', value: 'Wenzhou' },
			{ text: '绍兴', value: 'Shaoxing' },
			{ text: '湖州', value: 'Huzhou' },
		]
	},
	{
		text: '江苏省', value: 'jiangsu', children: [
			{ text: '南京', value: 'Nanjing' },
			{ text: '苏州', value: 'Suzhou' },
			{ text: '无锡', value: 'Wuxi' },
			{ text: '常州', value: 'Changzhou' },
			{ text: '徐州', value: 'Xuzhou' },
		]
	},
	{
		text: '广东省', value: 'guangdong', children: [
			{ text: '广州', value: 'Guangzhou' },
			{ text: '深圳', value: 'Shenzhen' },
			{ text: '珠海', value: 'Zhuhai' },
			{ text: '佛山', value: 'Foshan' },
			{ text: '东莞', value: 'Dongguan' },
		]
	}, {
		text: '北京市', value: 'beijing', children: [
			{ text: '东城区', value: 'Dongcheng' },
			{ text: '西城区', value: 'Xicheng' },
			{ text: '朝阳区', value: 'Chaoyang' },
			{ text: '海淀区', value: 'Haidian' },
			{ text: '丰台区', value: 'Fengtai' },
		]
	},
	{
		text: '上海市', value: 'shanghai', children: [
			{ text: '黄浦区', value: 'Huangpu' },
			{ text: '徐汇区', value: 'Xuhui' },
			{ text: '长宁区', value: 'Changning' },
			{ text: '静安区', value: 'Jingan' },
			{ text: '普陀区', value: 'Putuo' },
		]
	},
	{
		text: '四川省', value: 'sichuan', children: [
			{ text: '成都', value: 'Chengdu' },
			{ text: '绵阳', value: 'Mianyang' },
			{ text: '德阳', value: 'Deyang' },
			{ text: '乐山', value: 'Leshan' },
			{ text: '宜宾', value: 'Yibin' },
		]
	},
	{
		text: '湖北省', value: 'hubei', children: [
			{ text: '武汉', value: 'Wuhan' },
			{ text: '宜昌', value: 'Yichang' },
			{ text: '襄阳', value: 'Xiangyang' },
			{ text: '荆州', value: 'Jingzhou' },
			{ text: '黄石', value: 'Huangshi' },
		]
	},
	{
		text: '山东省', value: 'shandong', children: [
			{ text: '济南', value: 'Jinan' },
			{ text: '青岛', value: 'Qingdao' },
			{ text: '烟台', value: 'Yantai' },
			{ text: '潍坊', value: 'Weifang' },
			{ text: '临沂', value: 'Linyi' },
		]
	},
	{
		text: '河南省', value: 'henan', children: [
			{ text: '郑州', value: 'Zhengzhou' },
			{ text: '洛阳', value: 'Luoyang' },
			{ text: '开封', value: 'Kaifeng' },
			{ text: '安阳', value: 'Anyang' },
			{ text: '新乡', value: 'Xinxiang' },
		]
	},
	{
		text: '河北省', value: 'hebei', children: [
			{ text: '石家庄', value: 'Shijiazhuang' },
			{ text: '唐山', value: 'Tangshan' },
			{ text: '秦皇岛', value: 'Qinhuangdao' },
			{ text: '邯郸', value: 'Handan' },
			{ text: '保定', value: 'Baoding' },
		]
	},
];
const fieldValue1 = ref('出发地');

const onConfirm1 = ({ selectedOptions, selectedIndexes }) => {
	showPicker1.value = false;
	fieldValue1.value = selectedOptions[0].children[selectedIndexes[1]].text;
	sourceList.value = select(fieldValue1.value, fieldValue2.value, sourceList1.value)
};


const showPicker2 = ref(false)
const columns2 = [
	{
		text: '全部', value: 'all', children: [
			{ text: '目的地', value: 'all' },
		]
	},
	{
		text: '浙江省', value: 'zhejiang', children: [
			{ text: '杭州', value: 'Hangzhou' },
			{ text: '宁波', value: 'Ningbo' },
			{ text: '温州', value: 'Wenzhou' },
			{ text: '绍兴', value: 'Shaoxing' },
			{ text: '湖州', value: 'Huzhou' },
		]
	},
	{
		text: '江苏省', value: 'jiangsu', children: [
			{ text: '南京', value: 'Nanjing' },
			{ text: '苏州', value: 'Suzhou' },
			{ text: '无锡', value: 'Wuxi' },
			{ text: '常州', value: 'Changzhou' },
			{ text: '徐州', value: 'Xuzhou' },
		]
	},
	{
		text: '广东省', value: 'guangdong', children: [
			{ text: '广州', value: 'Guangzhou' },
			{ text: '深圳', value: 'Shenzhen' },
			{ text: '珠海', value: 'Zhuhai' },
			{ text: '佛山', value: 'Foshan' },
			{ text: '东莞', value: 'Dongguan' },
		]
	}, {
		text: '北京市', value: 'beijing', children: [
			{ text: '东城区', value: 'Dongcheng' },
			{ text: '西城区', value: 'Xicheng' },
			{ text: '朝阳区', value: 'Chaoyang' },
			{ text: '海淀区', value: 'Haidian' },
			{ text: '丰台区', value: 'Fengtai' },
		]
	},
	{
		text: '上海市', value: 'shanghai', children: [
			{ text: '黄浦区', value: 'Huangpu' },
			{ text: '徐汇区', value: 'Xuhui' },
			{ text: '长宁区', value: 'Changning' },
			{ text: '静安区', value: 'Jingan' },
			{ text: '普陀区', value: 'Putuo' },
		]
	},
	{
		text: '四川省', value: 'sichuan', children: [
			{ text: '成都', value: 'Chengdu' },
			{ text: '绵阳', value: 'Mianyang' },
			{ text: '德阳', value: 'Deyang' },
			{ text: '乐山', value: 'Leshan' },
			{ text: '宜宾', value: 'Yibin' },
		]
	},
	{
		text: '湖北省', value: 'hubei', children: [
			{ text: '武汉', value: 'Wuhan' },
			{ text: '宜昌', value: 'Yichang' },
			{ text: '襄阳', value: 'Xiangyang' },
			{ text: '荆州', value: 'Jingzhou' },
			{ text: '黄石', value: 'Huangshi' },
		]
	},
	{
		text: '山东省', value: 'shandong', children: [
			{ text: '济南', value: 'Jinan' },
			{ text: '青岛', value: 'Qingdao' },
			{ text: '烟台', value: 'Yantai' },
			{ text: '潍坊', value: 'Weifang' },
			{ text: '临沂', value: 'Linyi' },
		]
	},
	{
		text: '河南省', value: 'henan', children: [
			{ text: '郑州', value: 'Zhengzhou' },
			{ text: '洛阳', value: 'Luoyang' },
			{ text: '开封', value: 'Kaifeng' },
			{ text: '安阳', value: 'Anyang' },
			{ text: '新乡', value: 'Xinxiang' },
		]
	},
	{
		text: '河北省', value: 'hebei', children: [
			{ text: '石家庄', value: 'Shijiazhuang' },
			{ text: '唐山', value: 'Tangshan' },
			{ text: '秦皇岛', value: 'Qinhuangdao' },
			{ text: '邯郸', value: 'Handan' },
			{ text: '保定', value: 'Baoding' },
		]
	},


];
const fieldValue2 = ref('目的地');

const onConfirm2 = ({ selectedOptions, selectedIndexes }) => {
	showPicker2.value = false;
	fieldValue2.value = selectedOptions[0].children[selectedIndexes[1]].text;
	sourceList.value = select(fieldValue1.value, fieldValue2.value, sourceList1.value)
};


const showPicker3 = ref(false)
const columns3 = [
	{ text: '普通厢车', value: '1', children: [{ text: '4.2米', value: '4.2' }] },
	{ text: '平板挂车', value: '2', children: [{ text: '5.4米', value: '5.4' }] },
	{ text: '平板货车', value: '3', children: [{ text: '6.8米', value: '6.8' }] },

];
const fieldValue3 = ref('车辆类型');

const onConfirm3 = ({ selectedOptions }) => {
	showPicker3.value = false;
	fieldValue3.value = selectedOptions[0].text;
};

const showPicker4 = ref(false)
const columns4 = [
	{ text: '全部', value: 'quanbu' },
	{ text: '整车', value: 'zhengche' },
	{ text: '零担', value: 'lingdan' },
];
const fieldValue4 = ref('运输类型');

const onConfirm4 = ({ selectedOptions }) => {
	showPicker4.value = false;
	fieldValue4.value = selectedOptions[0].text;
};

onActivated(() => {
	contentRef.value.scrollTop = parseFloat(localStorage.getItem('top'))
	localStorage.removeItem('top')
})

onDeactivated(() => {
	localStorage.setItem('top', top.value)
})


function addclick(id) {
	// alert(111)
	id = JSON.stringify(id)
	router.push({
		name: 'finddetail',
		query: {
			id: id,
		}
	})
}

const contentRef = ref()

const top = ref(0)
function scrollTop(event) {
	// console.log(event.target);
	top.value = event.target.scrollTop
}



const props = defineProps(['sourceList'])


</script>

<template>

	<div class="top">
		<div class="left"> 寻找货源</div>
		<div class="right"> <svg t="1731912484050" class="icon" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="4291"
				data-spm-anchor-id="a313x.search_index.0.i1.3a553a81KNSW66" width="20" height="20">
				<path
					d="M704 192a106.666667 106.666667 0 0 1 106.666667 106.666667v469.333333a106.666667 106.666667 0 0 1-106.666667 106.666667H320a106.666667 106.666667 0 0 1-106.666667-106.666667V298.666667a106.666667 106.666667 0 0 1 106.666667-106.666667 21.333333 21.333333 0 1 0 0-42.666667 149.333333 149.333333 0 0 0-149.333333 149.333334v469.333333a149.333333 149.333333 0 0 0 149.333333 149.333333h384a149.333333 149.333333 0 0 0 149.333333-149.333333V298.666667a149.333333 149.333333 0 0 0-149.333333-149.333334 21.333333 21.333333 0 0 0 0 42.666667z"
					fill="#ffffff" p-id="4292"></path>
				<path
					d="M320 554.666667a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667H320z m0-128a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667H320z m0 256a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667H320zM405.333333 192h213.333334a21.333333 21.333333 0 0 0 0-42.666667H405.333333a21.333333 21.333333 0 0 0 0 42.666667z"
					fill="#ffffff" p-id="4293"></path>
			</svg>订单</div>

	</div>
	<div class="container">

		<div class="u1580">
			<div class="u1581" @click="showPicker1 = true">
				<img src="/imgs/u27.svg" alt="">
				{{ fieldValue1 }}
				<img src="/imgs/u26.svg" alt="">
			</div>
			<div class="u1581" @click="showPicker2 = true">
				{{ fieldValue2 }}
				<img src="/imgs/u26.svg" alt="">
			</div>
			<div class="u1581" @click="showPicker3 = true">
				{{ fieldValue3 }}
				<img src="/imgs/u26.svg" alt="">
			</div>
			<div class="u1581" @click="showPicker4 = true">
				{{ fieldValue4 }}
				<img src="/imgs/u26.svg" alt="">
			</div>
		</div>

		<!-- <keep-alive include="Source"> -->
		<!-- <sourceCom :source-list="sourceList"></sourceCom> -->
		<!-- </keep-alive> -->

		<div class="content" ref="contentRef" @scroll="scrollTop">

			<div class="box" v-for="item in sourceList" :key="item.id">
				<div class="line1">
					<div><span>{{ item.from }}</span><img src="/imgs/u10.svg" alt=""><span>{{ item.to }}</span></div>
					<button class="button" @click="addclick(item)">我要接单</button>
					<div style="color: red;">￥{{ item.price }}</div>
				</div>
				<div class="line2">
					<div style="margin-bottom: 15px;"><span style="color: #999;">装车时间：</span><span>{{ item.time
							}}</span>
					</div>
					<div><span style="color: #999;">货物信息：</span><span>{{ item.goodstype }}/ {{ item.weight }}吨/
							{{ item.volume }}方</span></div>
				</div>
			</div>
		</div>
	</div>

	<van-popup v-model:show="showPicker1" round position="bottom">
		<van-picker :columns="columns1" @cancel="showPicker1 = false" @confirm="onConfirm1" />
	</van-popup>
	<van-popup v-model:show="showPicker2" round position="bottom">
		<van-picker :columns="columns2" @cancel="showPicker2 = false" @confirm="onConfirm2" />
	</van-popup>
	<van-popup v-model:show="showPicker3" round position="bottom">
		<van-picker :columns="columns3" @cancel="showPicker3 = false" @confirm="onConfirm3" />
	</van-popup>
	<van-popup v-model:show="showPicker4" round position="bottom">
		<van-picker :columns="columns4" @cancel="showPicker4 = false" @confirm="onConfirm4" />
	</van-popup>
</template>
<style lang="scss" scoped>
.u1580 {
	color: #999;
	display: flex;
	background-color: white;
	height: 40px;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;

	.u1581 {
		width: 25%;
		box-sizing: border-box;
		border-right: 1px solid rgba(242, 242, 242, 1);
		line-height: 40px;
		text-align: center;
	}
}

.container {
	flex: 1;

	padding: 0;
	margin: 0;
	background-color: rgba(242, 242, 242, 1);
	overflow: auto;

	.content {
		height: calc(100% - 40px);
		overflow: auto;

	}
}


.header {
	height: 0.6rem;
	background-color: #1678ff;
	line-height: 0.6rem;
	font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 16px;
	color: #FFFFFF;

	padding: 0 20px;
	display: flex;
	justify-content: space-between;

	.left {
		font-weight: 650;
		font-size: 20px;
	}

	img {
		position: relative;
		top: 5px;
	}
}

.top {
	background-color: #1678ff;
	color: wihte;
	display: flex;
	justify-content: space-between;
	height: 0.6rem;
	align-items: center;
	box-sizing: border-box;
	padding: 0 15px;

	.left {
		font-size: 18px;
	}

	.right {
		font-size: 16px;
		display: flex;
		align-items: center;
	}
}



.box {
	color: black;
	// height: 115px;
	margin: 20px;
	background-color: white;
	border-radius: 15px;
	padding: 20px;

	.line1 {
		font-weight: 500;
		font-style: normal;
		font-size: 16px;
		display: flex;
		justify-content: space-between;

		img {
			margin: 0 10px;
		}

		.button {
			position: relative;
			top: 78px;
			right: -88px;
			background-color: white;
			color: #1678ff;
			border: 1px solid #1678ff;
			font-size: 12px;
			width: 80px;
			height: 30px;
			border-radius: 15px;
		}
	}

	.line2 {
		margin-top: 30px;
	}


}
</style>
